<div  style="background-color: #e9e9e9;">

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
    <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          </div>
   <div class="collapse navbar-collapse">

           <ul class="nav navbar-nav">
		             <li class="${request.controllerClass.simpleName =~ "Timeline" ? 'active' : ''}"><a href="@{Timeline.teste()}" >&{'inicio'}</a></li>
		             <li class="${request.controllerClass.simpleName =~ "Projetos" ? 'active' : ''}"><a href="@{Projetos.index(qtdAmigos)}" >&{'projetos'}</a></li>
		             <li class="${request.controllerClass.simpleName =~ "Livros" ? 'active' : ''}"><a href="@{Livros.index()}" >&{'livro'}s</a></li>
		             <li class="${request.controllerClass.simpleName =~ "Estante" ? 'active' : ''}"><a href="@{Estante.index()}" >&{'biblioteca'}</a></li>
		             #{if user?.usu_role == 'Editor'}
		             <li class="${request.controllerClass.simpleName =~ "Editor" ? 'active' : ''}"><a href="@{Editores.index()}" >Editor</a></li>
		              #{/if}

        </ul>
        <span class="navbar-form navbar-right">
        <ul class="nav navbar-nav">
        <li class="dropdown messages-dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> &{'idiomas'} <span class="badge">3</span> <b class="caret"></b></a>
        <ul class="dropdown-menu">
                
                <li class="message-preview">
                  <a href="@{Timeline.mudarIdioma(2)}">
                    <span class="avatar"><img width='30' height='35' src="@{'/public/images/brasil.jpg'}"></span>
                    <span class="name">${'portugues'}</span>
                 
                  </a>
                </li>
                <li class="divider"></li>
                <li class="message-preview">
                  <a href="@{Timeline.mudarIdioma(1)}">
                    <span class="avatar"><img width='30' height='35' src="@{'/public/images/estados unidos.jpg'}"></span>
                    <span class="name">${'ingles'}</span>
                  
                  </a>
                </li>
                <li class="divider"></li>
                <li class="message-preview">
                  <a href="@{Timeline.mudarIdioma(3)}">
                    <span class="avatar"><img width='30' height='35' src="@{'/public/images/espanha.jpg'}"></span>
                    <span class="name">${'espanhol'}</span>
                   
                  </a>
                </li>
                <li class="divider"></li>
               
              </ul></li>
		            <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">${user.usu_nome}<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li align="center" class="well">
                <div><img class="img-responsive" style="padding:2%;" src="${user.usu_caminho_ima}"/><a class="change" href="">Change Picture</a></div>
                <a href="#" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-lock"></span> Security</a>
                <a href="@{Application.logout()}" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
            </li>
           </ul>
        </li>
      </ul>
    </li>
    </ul>
        </span>
        
         </div>
         </div>
         </div>
        <br><br><br>